<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="w">
				{{title}}
			</div>
		</div>
	</body>
</html>
<script>
	//生命周期函数，在生命周期内某个时间节点要执行的方法
	const {createApp,ref} = Vue;
	const app = createApp({
		data(){
			return{
				title:'vue学习'
			}
		},
		methods:{
			
		},
		//创建app实例之前要执行的函数
		beforeCreate(){
			console.log('beforeCreate被执行');
		},
		//创建app实例之后要执行的函数
		created(){
			console.log('created被执行');
		},
		//在模板挂载之前要执行的上述
		beforeMount(){
			//console.log(document.querySelector('title').innerHTML,'beforeMount');
		},
		//在模板挂载之后要执行的上述
		mounted(){
			console.log(document.querySelector('title').innerHTML,'mounted');
		},
		//数据被修改之前要执行的函数
		beforeUpdate(){
			console.log('beforeUpdate被执行')
		},
		//数据被修改之后要执行的函数
		updated(){
			console.log('Update被执行')
		},
		//卸载模板之前要执行的函数
		beforeUnmount(){
			console.log('beforeUnmount被执行')
		},
		//卸载模板之前要执行的函数
		unmounted(){
			console.log('Unmounted被执行')
		},
	});
	const vm = app.mount("#app")
</script>